<style scoped>
    .wraper {
        padding: 0 20px;
    }

    .search {
        padding-bottom: 20px;
    }

    .search span {
        color: #68777c;
        font-weight: bold;
        padding-right: 18px;
    }

    .search button {
        background-color: #00a8f7;
        color: #fff;
        margin-left: 8px;
    }

    .top {
        margin-bottom: 20px;
        border-top: 1px dashed #cccccc;
    }


    .wraper .headline {
        position: relative;
        font-size: 12px;
        color: #303134;
        font-weight: bold;
        margin: 10px 0;
        line-height: 32px;
    }

    .wraper .add-agent {
        position: absolute;
        top: 0px;
        right: 30px;
        background-color: #348bf2;
        color: #fff;
    }

    .iconfont {
        font-size: 14px;
    }

    .red-font {
        color: #ff1f1f;
    }




    .fixed-bottom {
        padding-left: 20px;
        padding-right: 20px;
        height: 80px;
        line-height: normal !important;
        position: fixed;
        left: 210px;
        right: 0;
        bottom: 0;
        z-index: 999;
        text-align: center;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
    }

    .sidehide {
        left: 75px;
    }


    /* 表格样式 start*/

    .pro-card {
        margin-bottom: 10px;
    }

    .pro-card-head {
        background-color: #e6e7eb;
        line-height: 38px;
        border: 1px solid #ddd;
    }

    .pro-card-title {
        font-size: 14px;
        color: #333;
        font-weight: bold;
        padding-left: 20px;
    }

    .pro-card-headr {
        padding-right: 10px;
        text-align: right;
    }

    .pro-card-content {
        clear: both;
    }

    .pro-paramname {
        text-align: center;
        background-color: #e6e7eb;
        font-size: 14px;
        color: #333;
        border-right: 1px solid #ddd;
    }

    .pro-paramvalue {
        padding-left: 10px;
        border-right: 1px solid #ddd;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .pro-card-contentrow {
        line-height: 40px;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }






    /* 表格样式  end */

    /* 分页 start */

    .page {
        margin: 0;
    }

    .ivu-page {
        padding-bottom: 150px;
    }







    /* 分页 end */
</style>
<style>
    .a-link {
        color: #4074e1;
        text-decoration: underline;
        cursor: pointer;
    }
</style>



<template>
    <div class="policy-manage">
        <product-title></product-title>
        <div class="wraper">
            <div class="pro-con-f common-box-body">
                <Row>
                    <h3 class="search-h3 huang">
                        快速搜索
                    </h3>
                    <Form :model="searchForm" class="search-form">
                        <Col :xs="24" :sm="24" :md="24" :lg="8">
                        <Form-item>
                            <DatePicker :value="searchForm.dateTime" @on-change="contractchange" transfer format="yyyy-MM-dd" type="daterange" placement="bottom-end"
                                placeholder="请选择时间"></DatePicker>
                        </Form-item>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8">
                        <Form-item>
                            <Input size="large" type="text" v-model="searchForm.title" placeholder="请输入标题" />
                        </Form-item>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="8">
                        <Button size="large" style="width:80px" class="fr" type="info" icon="ios-search" @click="search">搜索</Button>
                        </Col>
                        <div class="clear"></div>
                    </Form>
                    <Col span="24" class="table-action">
                    <div style="border-right: 1px solid #EDF2F6;" class="fr">
                        <Button type="warning" size="large" class="fr" style="width:80px" icon="plus" @click="exportClick"><Icon type="md-add" />新增</Button>
                    </div>
                    </Col>
                </Row>
            </div>
            <div class="detail">
                <div class="clearfix">
                    <div class="table-theme highlight_table">
                        <Table :loading="tableloading" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe
                            highlight-row border :columns="columns1" :data="tablelist" class=""></Table>
                    </div>
                </div>
            </div>
             <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
            <Row class="pro-pagesize">
                <Col span="12">
                <Button type="error"  :disabled="tableaction" @click="tableDel" size="large" class="fl mr10 ">删除</Button>
                <Button type="primary" :disabled="tableaction" @click="tableEdit" size="large" class="fl mr10">编辑</Button>
                </Col>
                <Col  span="12" class="tRight">
                <Page ref="pages" :current="currentpage" :total="listTotal" show-total show-sizer :page-size="pagesize" @on-change="pageChange"
                    @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                </Col>
            </Row>
        </div>
        </div>
        <Modal v-model="modal1" title="公告" width="800px" :mask-closable="false">
            <Row>
                <div style="text-align:center">
                 <Form :model="content" class="common-box-body">
                        <Col>
                            <Form-item label="标题">
                                <Input v-model="content.title" placeholder="请输入标题"></Input>
                            </Form-item>
                            <Form-item v-if="edit">
                                    <div style="text-align:right;color:blue;cursor:pointer;text-decoration:underline;" @click="pdfsend">
                                        请上传PDF文档>>
                                    </div>
                                    <input type="file" style="display:none" id="pdf" @change="cailiaoChange($event)">
                            </Form-item>
                            <Form-item >
                                {{pdfname}}
                            </Form-item>
                        </Col>
                </Form>
                </div>
            </Row> 
             <div slot="footer">
                    <Button type="primary" size="large"  @click="submit" :disabled="over">提交</Button>
                    <Button size="large"   @click="cancle" :disabled="over">取消</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import productTitle from '../../components/productTitle'
    import {notice_list,add_notices,edit_notices,del_notices,get_notices} from '../../api/app_notice'
    import {getStsTokenWrite} from '../../api/common'
    export default {
        data() {
            return {
                over:true,
                edit:false,
                pdfname:'',
                content:{
                    title:'',
                    url:'',
                    // pdfname:'',
                },
                modal1:false,
                exportModal: false,
                readonly: true, //org.phone  弹出框
                showAddModal: false, //点击设置,弹出模态框
                closeable: false, //shif按ese按钮退出
                loading: true, //模态框家在状态提交确定
                closeable: false,
                // loading: true,
                remoteloading: false,
                page: 1,
                pagesize: 10,
                listTotal: 0,
                searchForm: {
                    p: 1,
                    pagesize: 10,
                    title:"",
                    start_date: "",
                    end_date: ""
                },
                oname: '',
                deptlist: {},
                ranklist: {},
                orglist: [],
                proloading: false,
                comoptions: [],
                tableloading: false,
                tableaction: true,
                current: 0,
                currentpage: 1,
                currentRow: {},
                columns1: [
                    {
                        title: '序号',
                        type: "index",
                        align: 'center',
                        width:'80'
                    },
                    {
                        title: '时间',
                        key: 'date',
                        align: 'center',
                        width:"300"
                    },
                    {
                        title: '标题',
                        key: 'title',
                        align: 'center',
                    },
                ],
                tablelist: [

                ],
                org: {
                    phone: '', //手机号
                    pwd: '', //密码
                    pwd_two: '',
                },
            }
        },
        components: {
            productTitle
        },
        computed: {
            slidetoggle() {
                return this.$store.state.sildeshow
            },
        },
        created() {
            this.getList();
        },
        mounted() {},
        methods: {
            // 编辑
            tableEdit() {
                this.over=false;
                let params={
                    id:this.currentRow.id
                }
                new Promise((resolve, reject) => {
                    get_notices(params).then(response => {
                        if (response.data.err == 0) {
                            this.modal1 = true;
                            this.content = response.data.result;
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            tableDel(){
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该条记录?',
                    onOk: () => {
                        this.del(this.currentRow.id);
                    },
                });
            },
            // 获取单行数据
            tableCurrentChange(currentRow, oldCurrentRow) {
                this.edit=false;
                this.tableaction = false;
                this.currentRow = currentRow;
            },
            // 页码改变
            pageChange(page) {
                this.page = page
                this.searchForm.p = page
                this.getList()
                this.tableaction=true;
            },
            // 每页条数改变
            pageSizeChange(pagesize) {
                this.page=1;
                this.searchForm.page=1;
                this.pagesize = pagesize;
                this.searchForm.pagesize = pagesize;
                this.tableaction=true;
                this.getList();
            },
            contractchange(value) {
                this.searchForm.start_date = value[0]
                this.searchForm.end_date = value[1]
            },
            // 搜索
            search() {
                this.page = 1
                this.searchForm.p = 1
                this.$refs['pages'].currentPage=1
                this.getList();
            },
            // 获取承保单列表
            getList() {
                new Promise((resolve, reject) => {
                    notice_list(this.searchForm).then(response => {
                        console.log(response.data, "11")
                        if (response.data.err == 0) {
                            this.tablelist = response.data.list;
                            this.listTotal = response.data.total;
                            this.tableloading = false;
                            
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            exportClick() {
               this.modal1=true;
               this.edit=true;
               this.over=true;
            },
            pdfsend(){
                document.getElementById('pdf').click();
            },
            cailiaoChange(e){
                // if (!/\.(pdf|doc|docx)$/.test(e.target.value)) {
                if (!/\.(pdf)$/.test(e.target.value)) {
                    alert('文件类型必须是pdf')
                    return false
                }else{
                    var file = document.getElementById('pdf').files[0];
                    const pdf = document.getElementById('pdf');
                    let files=pdf.files[0];
                    getStsTokenWrite().then((res)=>{
                        if(res.data.err==0){
                            var sts = res.data.data.Credentials;
                            var client = new OSS.Wrapper({
                                region:'oss-cn-hangzhou',
                                accessKeyId: sts.AccessKeyId,
                                accessKeySecret: sts.AccessKeySecret,
                                stsToken: sts.SecurityToken,
                                bucket: 'kuaibao-imgs',
                                secure: true,
                            });
                            client.multipartUpload(files.name, files, {

                            }).then((results) => {
                                if(file.size>100){
                                    this.content.url=results.res.requestUrls[0].split('?')[0];
                                    this.$Message.success('上传成功');
                                    this.over=false;
                                }else if(results.url){
                                    //pdf  oss路径
                                    this.content.url=results.url;
                                    this.over=false;
                                    this.$Message.success('上传成功');
                                }else{
                                    this.$Message.error('上传出错');
                                }
                            })
                        }
                    })
                }
            },
            submit(){
                let _this = this;
                if(!this.content.title){
                    this.$Message.error('标题不能为空');
                    return false;
                }
                if(!this.edit){
                    
                    new Promise((resolve, reject) => {
                        edit_notices(_this.content).then(response => {
                            if(response.data.err == 0){
                                this.$Message.success(response.data.info);
                                this.modal1=false;
                                location.reload();
                                this.content.id="";
                                this.content.title="";
                                this.search();
                            } else {
                                this.$Message.error(response.data.info);
                            }                       
                            resolve();
                        }).catch(error => {
                            reject(error);
                        });
                    });
                }else{
                    if(!this.content.url){
                        this.$Message.error('pdf不能为空');
                        return false;
                    }
                    new Promise((resolve, reject) => {
                        add_notices(_this.content).then(response => {
                            if(response.data.err == 0){
                                this.modal1=false;
                                this.$Message.success(response.data.info);
                                this.content.id="";
                                this.content.title="";
                                this.search();
                                location.reload();
                            } else {
                                this.$Message.error(response.data.info);
                            }                       
                            resolve();
                        }).catch(error => {
                            reject(error);
                        });
                    });
                }
                
            },
            cancle(){
                this.modal1 = false;
                this.content.title="";
                this.over=true;
            },
            del(id){
                let params={
                    id:id
                }
                new Promise((resolve, reject) => {
                        del_notices(params).then(response => {
                            if(response.data.err == 0){
                                this.$Message.success(response.data.info);
                                location.reload();
                                this.search();
                            } else {
                                this.$Message.error(response.data.info);
                            }                       
                            resolve();
                        }).catch(error => {
                            reject(error);
                        });
                    });
            },

        }
    }
</script>